<script setup>
import { ref, computed } from 'vue';
import TieBaLogo from '@/Components/TieBaLogo.vue';
import Dropdown from '@/Components/Dropdown.vue';
import DropdownLink from '@/Components/DropdownLink.vue';
import { Link, usePage } from '@inertiajs/vue3';

const showingNavigationDropdown = ref(false);
const page = usePage();
const user = computed(() => page.props.auth?.user);
</script>

<template>
    <div class="min-h-screen bg-white">
        <!-- 头部导航栏 -->
        <header class="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur-lg supports-[backdrop-filter]:bg-white/80">
            <div class="container mx-auto flex h-16 items-center justify-between px-3 sm:px-4 max-w-7xl gap-2 sm:gap-4">
                <!-- Logo 区域 -->
                <div class="flex items-center gap-2 sm:gap-6 flex-shrink-0">
                    <Link :href="route('home')" class="flex items-center gap-1.5 sm:gap-2 font-bold text-lg sm:text-xl hover:opacity-80 transition-opacity">
                        <TieBaLogo class="h-6 w-6 sm:h-7 sm:w-7 text-gray-900" :size="28" />
                        <span class="text-gray-900 hidden sm:inline">贴吧</span>
                    </Link>
                </div>

                <!-- 搜索框区域 -->
                <div class="flex-1 max-w-2xl mx-2 sm:mx-4">
                    <Link :href="route('search.index')" class="relative block group">
                        <svg class="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 h-4 w-4 sm:h-5 sm:w-5 text-gray-500 transition-colors group-hover:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        <input 
                            type="text" 
                            placeholder="搜索贴吧、帖子、用户..." 
                            class="w-full pl-9 sm:pl-12 pr-3 sm:pr-4 py-2 sm:py-2.5 border border-gray-200 rounded-xl bg-white text-sm sm:text-base placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-900/20 focus:border-gray-900/50 transition-all cursor-pointer hover:border-gray-900/30 shadow-sm"
                            readonly
                        />
                    </Link>
                </div>

                <!-- 右侧操作区域 -->
                <div class="flex items-center gap-1.5 sm:gap-3 flex-shrink-0">
                    <!-- 创建贴吧按钮 -->
                    <Link 
                        v-if="$page.props.auth?.user"
                        :href="route('bars.create')" 
                        class="hidden md:inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all border border-gray-200 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900 h-9 px-3 py-2"
                    >
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        <span class="hidden lg:inline">创建贴吧</span>
                    </Link>

                    <!-- 消息通知 -->
                    <Link
                        v-if="$page.props.auth?.user"
                        :href="route('notifications.index')"
                        class="relative inline-flex items-center justify-center p-2 hover:bg-gray-100 hover:text-gray-900 rounded-md transition-colors cursor-pointer"
                    >
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                        </svg>
                        <span
                            v-if="$page.props.unreadNotificationsCount > 0"
                            class="absolute top-0.5 right-0.5 w-2.5 h-2.5 rounded-full bg-red-500 border border-white shadow-sm"
                            :title="`您有 ${$page.props.unreadNotificationsCount} 条未读通知`"
                        ></span>
                    </Link>

                    <!-- 未登录：显示登录/注册按钮 -->
                    <template v-if="!user">
                        <Link
                            :href="route('login')"
                            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all bg-gray-900 text-white shadow-sm hover:bg-gray-800 h-9 px-3 sm:px-4 py-2"
                        >
                            <span class="hidden sm:inline">登录 / 注册</span>
                            <span class="sm:hidden">登录</span>
                        </Link>
                    </template>

                    <!-- 已登录：用户下拉菜单 -->
                    <div v-else class="relative">
                        <Dropdown align="right" width="56">
                            <template #trigger>
                                <button class="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-2">
                                    <span class="text-xs sm:text-sm font-medium text-gray-900 max-w-[60px] sm:max-w-none truncate">{{ user?.nickname || user?.name }}</span>
                                    <svg class="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>
                            </template>

                            <template #content>
                                <div class="px-4 py-3 border-b border-gray-200">
                                    <div class="font-medium text-sm text-gray-900">{{ user?.nickname || user?.name }}</div>
                                    <div class="text-xs text-gray-500 truncate">{{ user?.email || user?.phone || '' }}</div>
                                </div>
                                <DropdownLink :href="route('profile.show')">个人中心</DropdownLink>
                                <DropdownLink :href="route('profile.settings')">账户设置</DropdownLink>
                                <!-- <DropdownLink :href="route('bars.index')">我的贴吧</DropdownLink> -->
                                <hr class="my-1 border-gray-200" />
                                <DropdownLink :href="route('logout')" method="post" as="button" class="text-red-600 hover:text-red-700">
                                    退出登录
                                </DropdownLink>
                            </template>
                        </Dropdown>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="container mx-auto px-3 sm:px-4 py-4 sm:py-6 max-w-7xl">
            <!-- Page Heading -->
            <header class="mb-4 sm:mb-6" v-if="$slots.header">
                <slot name="header" />
            </header>

            <!-- Page Content -->
            <slot />
        </main>
    </div>
</template>

